<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>文件上传案例</title>
    <link href="admin/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="admin/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
    <link href="admin/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
    <link href="admin/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
    <link href="admin/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>
    <link href="admin/plugins/font_73je1zmu39/iconfont.css" rel="stylesheet" />
    <link href="admin/css/common.css" rel="stylesheet"/>
    <link href="admin/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="admin/css/imgsUpload.css" rel="stylesheet" type="text/css">

    <style>
        /*将所有元素的默认间距清除，方便自己设置，并且可以消除ul和li的圆点*/
        * {
            margin:0px;
            padding:0px;
        }
        ul {
            background:#fff;
            box-shadow:0 0 10px rgba(0,0,0,0.2);
            /*x坐标，y坐标，模糊程度，颜色*/
            white-space:nowrap;
            /*避免文字换行*/
        }
        ul li {
            position:relative;
        }
        ul li a {
            text-decoration:none;
            color:#777;
            padding:10px 20px;
            display:block;
            background: bottom right no-repeat;
        }
        ul li a:only-child {
            background:none;
        }
        ul li:hover {
            background:#777;
        }
        ul li:hover > a {
            color:#fff;
        }
        ul li:hover > ul {
            display:block;
            /* 鼠标进入母选单後，显示子选单 */
        }
        nav > ul > li {
            display:inline-block;
            /* 使一级选单排成一列 */
        }
        ul ul {
            position:absolute;
            top:100%;
            list-style:none;
            background:#fff;
            box-shadow:0 3px 3px rgba(0,0,0,0.2);
            display:none;
        }
        ul ul ul {
            position:absolute;
            left:100%;
            top:0;
        }
    </style>
</head>
<body>
    <!--创建一个文件上传的容器-->
    <div id="fileUploadContent" class="fileUploadContent"></div>
    <div id="main">
        <table id="table"></table>
    </div>
</body>
</html>
<script src="admin/js/jquery-2.1.3.min.js"></script>
<script src="admin/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="admin/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="admin/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="admin/plugins/waves-0.7.5/waves.min.js"></script>
<script src="admin/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="admin/js/common.js"></script>
<script type="text/javascript" src="admin/js/imgsUpload.js"></script>
<script type="text/javascript">
    let wfu = new WpFileUpload("fileUploadContent");
    wfu.initUpload({
        "uploadUrl":"/api/upload/u/images",//上传文件信息地址
        //"progressUrl":"#",//获取进度信息地址，可选，注意需要返回的data格式如下（{bytesRead: 102516060, contentLength: 102516060, items: 1, percent: 100, startTime: 1489223136317, useTime: 2767}）
        "showFileItemProgress": false,
        "onUpload": initTable,
        "showSummerProgress":false,
        // 是否显示文件单个总进度
        "showFileItemProgress":false
    });

    //显示文件，设置删除事件
    //wfu.showFileResult("img/a2.png","1",null,true,true,deleteFileByMySelf,downloadByMySelf);
    //如果不需要删除
    //wfu.showFileResult("img/a3.png","2",null,false,false,null,null);
    //多文件需要自己进行循环
    function deleteFileByMySelf(fileId){
        alert("要删除文件了："+fileId);
        wfu.removeShowFileItem(fileId);
    }


	function success(){
		wfu.uploadSuccess();
	}
		
	function fail(){
		 wfu.uploadError();
	}

	function downloadByMySelf(fileId, url) {
        alert(url)
    }

    var $table = $('#table');

    function initTable() {
        $table.bootstrapTable({
            data: wfu.resultData,
            height: getHeight(),
            striped: true,
            search: true,
            dataType: "json",
            showRefresh: true,
            showToggle: true,
            showColumns: true,
            minimumCountColumns: 2,
            showPaginationSwitch: true,
            clickToSelect: true,
            detailView: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            classes: 'table table-hover table-no-bordered',
            // sidePagination: 'server',
            //silentSort: false,
            smartDisplay: false,
            idField: 'id',
            sortName: 'id',
            sortOrder: 'desc',
            escape: true,
            searchOnEnterKey: true,
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'img', title: '图片名', sortable: true, valign: 'center'}
            ],
            onLoadSuccess: (res) => {
                console.log(res);
            }
        }).on('all.bs.table', function (e, name, args) {
            $('[data-toggle="tooltip"]').tooltip();
            $('[data-toggle="popover"]').popover();
        });
    }

</script>